import React, {Component} from 'react';

class Navbar extends Component {
    render() {
        return (
            <div style={{background: 'red'}}>
                <span>Navbar</span>
                 <button onClick={()=>{
                     console.log('子通知父,让父的isShow取反',this.props.event)
                     this.props.event()
                }}>click</button>
            </div>
        );
    }
}


class Sidebar extends Component {
    render() {
        return (
            <div style={{background: 'yellow', width: '200px'}}>
                <ul>
                    <li>111111</li>
                    <li>111111</li>
                    <li>111111</li>
                    <li>111111</li>
                    <li>111111</li>
                    <li>111111</li>
                    <li>111111</li>
                    <li>111111</li>
                    <li>111111</li>
                    <li>111111</li>
                    <li>111111</li>
                </ul>
            </div>
        );
    }
}

class App extends Component {
    state = {
        isShow:false
    }

    render() {
        return (
            <div>
                <Navbar event={()=>{
                    this.setState({
                        isShow:!this.state.isShow
                    })
                    console.log('父组件定义的event事件')
                }}></Navbar>

               {/* <button onClick={()=>{
                    this.setState({
                        isShow:!this.state.isShow
                    })
                }}>click</button>*/}

                {
                  this.state.isShow && <Sidebar/>
                }
            </div>
        );
    }
}

export default App;
